import React, { useMemo, useState } from 'react';
import IconFont from '../IconFont';
import styles from './index.less';
import moment from 'moment';
import { useWindowSize } from '@/utils/windowsize';
import { InputNumber, Button, Table } from 'antd'
import { mmConversionPx } from '@/utils/transpxmm';


function Atable({ config, setconfig, collapsed, layer }) {
    const [rowcol, setrowcol] = useState({
        row: 3,
        col: 3
    });

    const tablecomp = (type, it) => {
        let base = it.width > it.height ? it.height : it.width;
        base = it.unit == "mm" ? mmConversionPx(base) : base;

        
        let dataSource = new Array(rowcol.col * rowcol.row).fill('').map((item, index) => ({
            content: "内容",
            id: (index + 1).toString() + (it.components.length + 1).toString(),
            style: {
                color: "#000000",
                backgroundColor: "#FFFFFF",
                fontSize: 16
            }
        }));

        return {
            type,
            id: moment().valueOf(),
            style: {
                zIndex: it.components.length + 1,
                left: 0,
                top: 0,
                backgroundColor: "rgba(255,255,255,0)",
                width: base,
                height: 55 * (rowcol.row + 1),
                borderRadius: 8,
            },
            rowcol,
            dataSource,
            addsub: (it.components.length + 1).toString()
        }
    }


    let columns = useMemo(() => {
        return new Array(rowcol.col).fill("").map((it, i) => {
            return {
                title: "内容",
                dataIndex: (i + 1).toString(),
                key: (i + 1).toString()
            }
        })
    }, [rowcol])


    return (
        <div className={styles.container}>
            <div className={`${styles.item}`}>
                <div className={styles.aheader}>
                    <div className="center">
                        <IconFont type='icon-table1' style={{ color: "#1dac57", fontSize: 16 }}></IconFont>
                        <span>
                            表格
                        </span>
                    </div>

                    <div className={styles.column} style={{ width: 0, height: 100, overflow: "hidden", transition: "all 0.2s" }}>
                        <div style={{ width: 500, height: 500, transform: "scale(0.2)" }} className='center'>
                            <Table
                                style={{ width: 500, backgroundColor: "#FFFFFF" }}
                                pagination={false}
                                bordered={true}
                                size='large'
                                columns={columns}
                                dataSource={new Array(rowcol.row - 1).fill("").map((it, i) => {
                                    let res = {}
                                    columns.map(item => {
                                        res[item.dataIndex] = "内容"
                                    })
                                    return res
                                })
                                }
                            >

                            </Table>
                        </div>

                    </div>
                </div>

                <div className={styles.subber}>
                    <div className="center">
                        <label style={{ marginRight: 6 }}>行:</label>
                        <InputNumber
                            style={{ flex: 1 }}
                            value={rowcol.row}
                            onChange={(val) => {
                                setrowcol((s) => ({ ...s, row: val }))
                            }}
                        ></InputNumber>
                    </div>
                    <div className="center" style={{ marginTop: 6 }}>
                        <label style={{ marginRight: 6 }}>列:</label>
                        <InputNumber
                            style={{ flex: 1 }}
                            value={rowcol.col}
                            onChange={(val) => {
                                setrowcol((s) => ({ ...s, col: val }))
                            }}
                        ></InputNumber>
                    </div>

                    <Button
                        type='primary'
                        style={{ float: "right", marginTop: 6 }}
                        disabled={!rowcol.row || !rowcol.col}
                        onClick={() => {
                            setconfig(s => {
                                let newcf = { ...s };
                                newcf.pages = newcf.pages.map(it => {
                                    if (it.active) {
                                        it.components = it.components ?? [];
                                        it.components.push(tablecomp("Atable", it))
                                    }
                                    return it
                                })
                                return newcf
                            })
                        }}>确定</Button>
                </div>
            </div>

        </div>
    );
}

export default Atable;